<template>
	<view class="body">
		<myHeader :title="title"></myHeader>

		<view class="mt-20 p-20">
			<view style="width: 100px;width: 100px;border-radius: 50%;margin: 20upx auto 20upx auto;">
				<img :src="formData.img" :alt="formData.realName" style="width: 100px;width: 100px;	object-fit: cover;">
			</view>


			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-forms-item label="用户账号" name="userName">
					<uni-easyinput type="text" v-model="formData.userName" disabled="" />
				</uni-forms-item>
				<uni-forms-item label="用户名称" name="realName">
					<uni-easyinput type="text" v-model="formData.realName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="电话" name="phone">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender">
					<view class="sex_wapper">
						<view class="flex1 boy" :class="sexIndex==1?'active':''" data-index="0" @click="checkSex">
							<view class="sex"></view>
							<view class="txt">男</view>
						</view>
						<view class="flex1 girls" :class="sexIndex==0?'active':''" data-index="1" @click="checkSex">
							<view class="sex"></view>
							<view class="txt">女</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="生日" name="birthday">
					<uni-datetime-picker type="date" :value="formData.birthday" @change="dateChange">
					</uni-datetime-picker>
				</uni-forms-item>

				<view class="mt-20" style="display: flex;justify-content: space-around;">
					<button @click="up" class="bg-red text-white" style="font-size: 16px; flex: 0 0 30%;">修改头像</button>
					<button @click="upPwd" class="bg-red text-white"
						style="font-size: 16px; flex: 0 0 30%;">修改密码</button>
					<button class="bg-red text-white" @click="submitForm"
						style="font-size: 16px; flex: 0 0 30%;">提交修改</button>

				</view>

			</uni-forms>

			<!-- 修改密码 -->
			<uni-popup ref="popup" type="center" :animation="false">
				<uni-forms style="padding: 40upx; background-color: #FFF; border-radius: 8px;">
					<uni-forms-item label="旧密码" name="oldPwd">
						<uni-easyinput type="text" v-model="oldPwd" />
					</uni-forms-item>
					<uni-forms-item label="新密码" name="newPwd">
						<uni-easyinput type="password" v-model="newPwd" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="newPwdRep">
						<uni-easyinput type="password" v-model="newPwdRep" />
					</uni-forms-item>

					<view style="display: flex;justify-content: space-around;">
						<button style="flex: 0 0 40%;font-size: 16px;" class="bg-red text-white"
							@click="upPwdSubmit">确认修改</button>
						<button style="flex: 0 0 40%; font-size: 16px;" @click="upPwdClose">取消</button>
					</view>
				</uni-forms>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import myHeader from './../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	import axios from 'axios'
	export default {
		data() {
			return {
				title: '个人信息',
				oldPwd: '',
				newPwd: '',
				newPwdRep: '',
				// 表单数据
				formData: {
					userId: '',
					userName: '111',
					realName: '111',
					phone: '111',
					birthday: '2021-12-01',
					gender: '1',
					password: '123456',
					img: ''
				},
				sexIndex: 1,
				// 文件上传后的url
				fileUrl: '',
				// 表单验证
				rules: {
					realName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话',
						}]
					},
					birthday: {
						rules: [{
							required: true,
							errorMessage: '请选择生日',
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
				},
			}
		},
		mounted() {
			let _this = this
			uni.getStorage({
				key: 'user',
				success(e) {
					_this.formData.userId = e.data.user.userId;
				}
			});
			this.getUserById();
		},
		methods: {
			getUserById() {
				NetWorkTool.POSTFORM('/api/sys-user/byIdQueryUserInfo', {
					userId: this.formData.userId
				}, true).then(res => {
					this.formData = res
					this.sexIndex = this.formData.gender
				})
			},
			// 修改
			submitForm() {
				this.$refs.form.submit().then(res => {
					let param = {
						"birthday": this.formData.birthday,
						"gender": this.formData.gender,
						"img": this.formData.img,
						"phone": this.formData.phone,
						"realName": this.formData.realName,
						"userId": this.formData.userId,
						"userName": this.formData.userName
					}
					NetWorkTool.POST('/api/sys-user/modifyUserInfo', param, true).then(res => {
						uni.showToast({
							title: '修改成功，请重新登录',
							duration: 3000
						});
						uni.navigateTo({
							url: './../login/login'
						})
					});
				}).catch(err => {
					uni.showToast({
						title: "请完成信息填写",
						duration: 2000,
						icon: 'none',
					});
				})
			},
			up() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (e) => {
						let source = e.tempFiles[0];
						let token = '';
						uni.getStorage({
							key: 'AuthToken',
							success(e) {
								token = e
							}
						})
						const uploadTask = uni.uploadFile({
							url: '/api/uploadFile', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							header: {
								'x-access-token': token.data
							},
							formData: {
								'name': source.name,
								'size': source.size
							},
							success: (res) => {
								this.formData.img = JSON.parse(res.data).data.url;
								uni.showToast({
									title: "上传成功",
									duration: 2000
								});
							}
						});
					}
				});
			},
			// 选择性别
			checkSex: function(e) {
				this.sexIndex = e.currentTarget.dataset.index;
				this.formData.gender = this.sexIndex
			},
			dateChange(e) {
				this.formData.birthday = e
			},
			upPwd() {
				this.$refs.popup.open('top')
			},
			upPwdClose() {
				this.$refs.popup.close()
			},
			upPwdSubmit() {
				let oldPwd = this.oldPwd;
				let newPwd = this.newPwd;
				let newPwdRep = this.newPwdRep;
				if (oldPwd == "" || newPwd == "" || newPwdRep == "") {
					uni.showToast({
						title: '请完成信息填写',
						icon: 'none',
					});
					return;
				}
				if (oldPwd != this.formData.password) {
					uni.showToast({
						title: '原密码错误',
						icon: 'none',
					});
					return;
				}
				if (newPwd != newPwdRep) {
					uni.showToast({
						title: '两次新密码不一致',
						icon: 'none',
					});
					return;
				}

				let param = {
					"userId": this.formData.userId,
					"password": newPwd
				}
				console.log(param)
				NetWorkTool.POST('/api/sys-user/modifyPassword', param, true).then(res => {
					uni.showToast({
						title: '修改成功，请重新登录',
						duration: 3000
					});
					uni.navigateTo({
						url: './../login/login'
					})
				});
			}
		},
		components: {
			myHeader
		},
	}
</script>

<style lang="scss" scoped>
	@import url("/static/party_building/assets/style/federation.css");

	.group {
		border: 1px solid #E5E5E5;
		border-radius: 20upx;
	}

	.sex_wapper {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #EFEFEF;
	}

	.sex_wapper .flex1 {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.sex_wapper .sex {
		display: inline-block;
	}

	.sex_wapper .flex1.boy .sex {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		overflow: hidden;
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.boy.active .sex {
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.girls .sex {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		overflow: hidden;
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.girls.active .sex {
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.active .txt {
		font-size: 28rpx;
		color: #b33537;
	}
</style>
